<template>
	<s-layout id="layout" :title="''" :navbar="normal" leftIconColor="#ffffff" :autoBack="false" :leftIcon="leftIcon" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#FFF', fontSize: '32rpx',fontWeight:'600' }">
		<view id="app" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/user_user_background.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px',height:(516 - safeAreaInsets?.top - 44) + 'px'}">
			<view class="area">
				<view class="page_title">我的钱包</view>
				<!-- 资产盒子 -->
				<view class="money_box">
					<view class="money">{{ userInfo.money }}</view>
					<view class="total_assets">总资产（元）</view>
					<view class="two_box">
						<view  class="two_box_item">
							<view class="money_num">{{ total_income }}</view>
							<view class="money_text">累计收益</view>
						</view>
						<view class="two_box_item">
							<view class="money_num">{{ total_withdraw }}</view>
							<view class="money_text">累计提现</view>
						</view>
					</view>
				</view>

				<!-- 双按钮 -->
				<view class="button_box">
					<view class="Recharge_button" @tap="goUrl('/subpackage/user/user/rechargeable')">充值</view>
					<view class="Withdrawal_button" @tap="goUrl('/subpackage/user/user/withdraw_deposit')">提现</view>
				</view>

				<!-- 收益明细 -->
				<view class="Income_list">
					<scroll-view scroll-y v-if="wallet_list.length != 0" @scrolltolower='listScrolltolower'>
						<view class="Income_detail">收益明细</view>
						<view class="Income_list_item" v-for="(item,index) of wallet_list" :key="index">
							<view class="item_top">
								<view class="list_item_left">
									<view class="reason" >{{ detail_heading[index] }}</view>
									<view class="time">{{ formatDatetime(item.createtime) }}</view>
								</view>
								<view :class="item.money > 0 ? 'earnings_add' : 'earnings_subtract'">{{ item.money > 0 ? '+' : '' }}{{ item.money }}</view>
							</view>
							<view class="Note_box" v-if="item.memo !== ''">
								备注：{{ item.memo }}
							</view>
							
						</view>

						<view v-if="total > 20">
							<s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
						</view>
					</scroll-view>
					<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import { baseUrl } from '@/sheep/config';
	import sheep from '@/sheep';
	import { ref, reactive, unref, computed  } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { formatDatetime } from '@/utils/fn.js';
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const userInfo = sheep.$store('user').userInfo;
	onLoad(() => {
		user_money_logIndexList()
	})

	const detail_heading = computed(() => {
		return wallet_list.value.map(item => {
			switch (item.event) {
			case 'salary':
				return '工资';
				break;
			case 'commission_reward':
				return '佣金奖励';
				break;
			case 'withdraw':
				return '提现';
				break;
			case 'recharge':
				return '充值';
				break;
			}
		})
	})

	function goUrl(url,state,tabs) {
		uni.navigateTo({
			url
		})
	}

	// 封装我的钱包接口
	const wallet_list = ref([])
	const page = ref(1)
	const current_page = ref()
	const last_page = ref()
	const total = ref()
	const total_income = ref()
	const total_withdraw = ref()
	const user_money_logIndexList = async () => {
		let params = {
			page:page.value
		}
		const res = await sheep.$api.wallet.user_money_logIndexAPI(params)
		wallet_list.value = [...wallet_list.value,...res?.data.rows]
		current_page.value = res.data.current_page
		last_page.value = res.data.last_page
		total.value = res.data.total
		total_income.value = res.data.total_income
		total_withdraw.value = res.data.total_withdraw
	}

	// 滚动触底事件 + 分页处理
    const loadmoreRef = ref()
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        user_money_logIndexList()
    }

</script>

<style lang="scss">
	#app {
		background-size: contain; /* 或 cover */
		background-repeat :no-repeat;
	}

	// 版心
	.area {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}

	// 页面标题
	.page_title {
		font-family: PingFangSC;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 54rpx;
		font-style: normal;
		text-decoration: none;
		text-align: left;
		margin: 20rpx 0rpx 30rpx 10rpx;
	}

	// 资产部分
	.money_box {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 34rpx 0 40rpx 40rpx;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		.money {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: 74rpx;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 14rpx;
		}
		.total_assets {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-base;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-bottom: 40rpx;
		}
		.two_box {
			display: flex;
			align-items: center;
			.two_box_item {
				flex-grow: 1;
				.money_num {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: $uni-font-weight;
					font-size: 40rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
					margin-bottom: 10rpx;
				}
				.money_text {
					font-family: PingFangSC;
					color: $uni-text-color;
					font-weight: 500;
					font-size: $uni-font-size-base;
					font-style: normal;
					text-decoration: none;
					text-align: left;
				}
			}
		}
	}

	// 双按钮部分
	.button_box {
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		justify-content: space-between;
		.Recharge_button {
			margin-right: 11rpx;
			width: calc(50% - 22rpx);
			height: 90rpx;
			border-radius: 25px;
			background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%);
			font-family: PingFangSC;
			color: #FFFFFF;
			font-weight: $uni-font-weight;
			font-size: 34rpx;
			font-style: normal;
			text-decoration: none;
			text-align: center;
			line-height: 90rpx;
		}
		.Withdrawal_button {
			margin-left: 11rpx;
			width: calc(50% - 22rpx);
			height: 88rpx;
			border-radius: 25px;
			background-color: #FFFFFF;
			border: 2rpx solid $uni-color-primary;
			font-family: PingFangSC;
			color: $uni-color-primary;
			font-weight: $uni-font-weight;
			font-size: 34rpx;
			font-style: normal;
			text-decoration: none;
			text-align: center;
			line-height: 88rpx;
		}
	}

	// 收益明细
	.Income_list {
		height: 680rpx;
		border-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		padding: 30rpx 20rpx 0 20rpx;
		scroll-view {
			height: 100%;
		}
		.Income_detail {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: $uni-font-weight;
			font-size: $uni-font-size-big;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-left: 10rpx;
			padding-bottom: 32rpx;
			border-bottom: 1px solid #EEEEEE;
		}
		.Income_list_item {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #EEEEEE;
			.reason {
				font-family: PingFangSC;
				color: $uni-text-color;
				font-weight: $uni-font-weight;
				font-size: 30rpx;
				font-style: normal;
				text-decoration: none;
				text-align: left;
				margin-bottom: 16rpx;
			}
			.time {
				font-family: PingFangSC;
				color: #999999;
				font-weight: 500;
				font-size: 26rpx;
				font-style: normal;
				text-decoration: none;
			}
		}
		.item_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	// 备注
	.Note_box {
		margin-top: 32rpx;
		padding: 30rpx;
		border-radius: 8px;
		background-color: #F9FAFF;
		font-family: PingFangSC;
		color: #666666;
		font-weight: 550;
		font-size: 24rpx;
		font-style: normal;
		text-decoration: none;
	}

	// 伪类选择器：将最后一条数据的下边框去掉
	.Income_list_item:last-child {
		border-bottom: none;
	}

	// 收益 & 增
	.earnings_add {
		font-family: PingFangSC;
		color: #FF6600;
		font-weight: 500;
		font-size: 30rpx;
		font-style: normal;
		text-decoration: none;
	}
	
	// 收益 & 减
	.earnings_subtract {
		font-family: PingFangSC;
		color: #999999;
		font-weight: 500;
		font-size: 30rpx;
		font-style: normal;
		text-decoration: none;
	}
</style>